<template>
  <div id="map">
    <div class="change-map" v-if="show">
      <div class="change-title">
        地区：{{ content.name }}
      </div>
      <div class="change-item" v-for="(item,index) in content.child">{{ item.title }}：<strong
          :style="{color:index>=2?'blue':'#333333'}">{{ item.value }}{{ item.unit }}</strong></div>
    </div>
  </div>
</template>

<script setup>
//地图相关
import {onMounted, onUnmounted, ref} from "vue";
import {wzData} from '../data/data.js'
import wuzhouJson from "@/assets/wuzhou.json";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = ref();
const textStyle = {
  fontSize: 12,
  fontWeight: 'normal',
  fillColor: '#fff',
  padding: '2, 5',
  backgroundColor: 'rgb(246,137,38)',
  borderColor: '#fff',
  borderWidth: 1,
};
const show = ref(false)
const content = ref()

onMounted(() => {
  mapInit()
});

onUnmounted(() => {
  map.value?.destroy();
});


const mapInit = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "fb41d43f5d04ec8a71ea44877b957076",
  };
  AMapLoader.load({
    key: "8a24398fea98e274581edfc50a78e130",
    version: "2.0",
    AMapUI: {
      version: '1.1',
      plugins:['overlay/SimpleMarker','geo/DistrictExplorer']
    },
    plugins: [
      "AMap.Scale",
      "AMap.DistrictSearch",
      "AMap.Polygon",
      "AMap.GeoJSON",
      "AMap.GeometryUtil",
      "AMap.LabelsLayer",
      "AMap.LabelMarker",
      "AMap.MapType",
      "AMap.InfoWindow"
    ],
  })
      .then((AMap) => {
        map.value = new AMap.Map("map", {
          zoom: 8.5,
          center: [111.279022, 23.476733],
          viewMode: "2D",
          mapStyle: 'amap://styles/fresh'
        });
      }).then(() => {
    setMapType()
    setGeoJson()
    setMarkets()
  }).catch((e) => {
    console.log(e);
  });
}

const setMapType = () => {
  const amap = map.value
  amap.addControl(new AMap.MapType({
    defaultType: 0,
    showRoad: true,
    showTraffic: false
  }));
}


const setMarkets = () => {
  const amap = map.value
  const markers = [];
  const layer = new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex: 1000,
    collision: false,
    allowCollision: false,
  });
  layer.add(markers);
  amap.add(layer);

  wzData.forEach(item => {
    const marker = new AMap.LabelMarker({
      name: item.name,
      position: item.center,
      text: {
        content: item.name,
        direction: 'center',
        style: textStyle,
      }
    });
    marker.content = item.content
    marker.on('click', markerClick);
    markers.push(marker);
  })
  layer.add(markers);
  amap.add(layer);
}

//点击 marker，显示 信息
const markerClick = (e) => {
  console.log(e.data)
}

const setGeoJson = () => {
  const amap = map.value
  const geojson = new AMap.GeoJSON({
    geoJSON: wuzhouJson,
    getPolygon: function (wzArea, lnglats) {
      const area = AMap.GeometryUtil.ringArea(lnglats[0][0])
      const polygon = new AMap.Polygon({
        path: lnglats[0],
        fillOpacity: Math.sqrt(area / 8000000000),// 面积越大透明度越高
        strokeColor: 'white',
        fillColor: '#2758bb'
      });

      polygon.on('mouseover', (e) => {
        content.value = wzData.find(item => {
          return item.adcode === wzArea.properties.adcode
        })
        show.value = true
        polygon.setOptions({
          fillOpacity: 0.7,
          fillColor: '#f6bd16'
        })
      })
      polygon.on('mouseout', () => {
        show.value = false
        content.value = ''
        polygon.setOptions({
          fillOpacity: Math.sqrt(area / 8000000000),// 面积越大透明度越高
          fillColor: '#2758bb'
        })
      })
      return polygon;
    }
  });
  amap.add(geojson);
}

</script>

<style scoped lang="scss">

#map {
  height: 28.125vw;
  margin-bottom: 15px;
  background-color: #ffffff;
  position: relative;

  .change-map {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 99;
    font-size: 12px;
    width: 380px;
    max-height: 200px;
    background-color: rgba(255, 255, 255, .8);
    padding: 20px;
    box-sizing: border-box;
    text-align: left;

    .change-title {
      padding: 5px 10px;
      font-size: 16px;
      font-weight: bold;
      background-color: #ffffff;
      margin-bottom: 10px;
    }

    .change-item {
      padding: 5px 10px;
      font-size: 14px;
    }
  }
}

</style>
